<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo">
        姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
        名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName"><br>
        姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
        姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
        <br>
        <p>你的信息是：{{info}}</p>
        <br>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
    </div>
    <script src="../day02/js/vue.js"></script>
    <script>
        const vm = new Vue({
            // 选择器
            el: '#demo',
            // 保存数据
            data() {
                return {
                    firstName: 'A',
                    lastName: 'B',
                    fullName2: '',
                    info: '',
                }
            },
            watch: {
                /* // 监视什么属性就写什么属性
                firstName(value) {
                    this.fullName2 = value + '-' + this.lastName;
                },
                lastName(value){
                    this.fullName2 = this.firstName + '-' + value;
                } */
                firstName: {
                    handler(value) {
                        // 更新fullName2
                        this.fullName2 = value + '-' + this.lastName;
                        // 模拟异步请求得到用户的信息
                        setTimeout(() => {
                            const info = `我的姓名为${this.firstName}${this.lastName}以及其他信息`
                            // 更新info
                            this.info = info;
                        }, 1000)
                    },
                    immediate: true,//初始时就会执行一次
                }
            },
            // 监听计算
            computed: {
                // 这里简写了get()
                fullName() {
                    console.log("fullName()");
                    return this.firstName + '-' + this.lastName;
                },
                fullName3: {
                    // 监视fistName和lastName的变化
                    get() {
                        console.log("get()");
                        return this.firstName + '-' + this.lastName;
                    },
                    // 监听的是fullName3
                    set(value) {
                        console.log("set()");
                        const names = value.split('-');
                        this.fistName = names[0];
                        this.lastName = names[1];
                    }
                }
            }

        })
        // 使用vm.$watch('监视的属性',回调函数)
        // 监听的是lastName的变化
        vm.$watch('lastName', function (value) {
            // 更新了fullName2
            this.fullName2 = this.firstName + '-' + value;
        })
        /* 
        computed和watch的功能是相似的，不同是computed不能计算异步显示，而watch可以监听
        */
    </script>

</body>

</html>